/* 各页面公用样式 */


/* 清除浏览器的默认样式 */
* {
    /*  * 是通配符选择器 选中所有元素 */

    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
    /* 使边框和内边距不会撑大盒子. */
    box-sizing: border-box;
}

html {
    /* 让html和浏览器一样高(宽度一样宽了) */
    height: 100%;
}
body {
    /* 让body和html一样高(块级元素宽度默认一样宽了) */
    height: 100%;
    /* 给页面设置背景 */
    background-image: url(../image/QQ图片20220912085727.png);
    /* 让图片居中(垂直 水平居中) */
    background-position: center center;
    /* 不要重复出现 */
    background-repeat: no-repeat;
    /* 背景图大小 */
    background-size: cover;
}


.nav {
    /* 导航栏的高度普遍都是50px */
    height: 50px;
    /* rgbc 可表示半透明 */
    background-color: rgba(50,50,50,0.4);
    color: white;

    /* display: flex: 开启弹性布局. 加上这个属性的元素的子元素就会按照弹性布局来排列.
    1) 子元素就不再按照"块级元素" "行内元素" 这样的规则排列,统一都会排列成一个横行.
    2) 子元素可以使用 justify-content 在水平方向如何排列.
    3) 子元素还可以使用 align-items 垂直方向如何排列. */
    display: flex;
    /* 向左排列 */
    justify-content: flex-start;
    /* 元素垂直居中 */
    align-items: center;
}

.nav img {
    width: 40px;
    width: 40px;
    /* 图片与浏览器左边的距离 */
    margin-left: 30px;
    margin-right: 10px;
    /* 将图片设置为一个圆 */
    border-radius: 20px;
}

.nav .spacer {
    /* 父元素的70%的尺寸 */
    width: 70%;
}

.nav a {
    /* 字体颜色 */
    color: white;
    /* 去掉a标签的下划线 */
    text-decoration: none;
    /* 设置左右边距(内边距 外边距都可 根据需求来) 内边距在此可以让点击区域变大. */
    padding: 0 10px;
}

.nav a:hover {
    color: gray;
}

.nav a:active {
    color: white;
}

.container .container-left .gitee:hover {
    color: rgb(28, 25, 25);
}

.container .container-left .gitee:active {
    color: gray;
}

.container {
    width: 1000px;
    /* 水平居中 */
    margin: 0 auto;

    /* 设置高度 */
    height: calc(100% - 50px);

    /* 让left right可以水平排列 要用弹性布局 */
    display: flex;
    justify-content: space-between; 
}

.container .container-left {
    height: 100%;
    width: 200px;
}
.container .container-right {
    height: 100%;
    width: 796px;
    background-color: rgba(255,255,255,0.6);
    /* 设置内边距 不让博客内容顶着边界 */
    padding: 30px;
    /* 圆角矩阵 */
    border-radius: 10px;

    /* 如果内容超出范围, 自动添加滚动条 */
    overflow: auto;
}

.card {
    background-color: rgba(255,255,255,0.6);
    /* 设置内边距 不让文字和图片顶着边界 */
    padding: 30px;
    /* 圆角矩阵 */
    border-radius: 10px;
}

.card img {
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

.card h3 {
    /* 文字水平居中 */
    text-align: center;
    /* 上下左右各10px的内边距 */
    padding: 10px;
}

.card a {
    /* a标签是行内元素. 默认尺寸是和内容一样. 将其转为块级元素才好操作. */
    display: block;
    text-align: center;
    color: #999;
    /* 去掉a标签的下划线 */
    text-decoration: none;
    padding: 10px 0;
}

.card .counter {
    display: flex;
    justify-content: space-around;
    padding: 5px;
}